<script setup>

import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {inject, onMounted, reactive, ref, toRaw, toRefs, unref} from "vue";
import ImageFeaturesModel from "@/model/ImageFeaturesModel.js";
import {Delete} from "@element-plus/icons-vue";
import ImageFeaturesService from "@/service/impl/ImageFeaturesService.js";



const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const imageFeaturesModel = ref(new ImageFeaturesModel())
const classification = ref([])
const pageTable = ref()


onMounted(() => {
    module.value.page.show = true
    module.value.init(ImageFeaturesService.url.add, ImageFeaturesService.url.edit,
        ImageFeaturesService.url.del, null, null)
    module.value.operations.width = "200px"
    module.value.dialog.width = "40%"
    init()
})

const init = () => {
    module.value.dialog.show = false
    ImageFeaturesService.list(data.value.source()).then(res => {
        classification.value = res.data.classs
        res.data = res.data.features
        data.value.init(res)
    })
}

const editOpen = (data, index, type) => {
    module.value.dialog.load = false
    const fun = {
        0: () => {
            imageFeaturesModel.value = new ImageFeaturesModel()
        },
        1: () => {
            imageFeaturesModel.value = data
        }
    }
    fun[type]()
}

const editConfirm =(type) =>{
    const fun = {
        0 : (src) => {
            ImageFeaturesService.add(imageFeaturesModel.value).then(res => {
                src()
            })
        },
        1 : (src) => {
            ImageFeaturesService.edit(imageFeaturesModel.value).then(res => {
                src()
            })
        }
    }
    fun[type](init)

}

const delConfirm = (obj) => {
    ImageFeaturesService.del(obj).then(res => {
        init()
    })
}



</script>
<template>
    <Page
        @refresh="init"
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="delConfirm"
        ref="pageTable"
    >
        <template #operate-before>
            <el-select v-model="data.data.languageClassificationId" clearable style="width: 200px;margin-left: 15px" @change="init">
                <el-option
                    v-for="item in classification"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                />
            </el-select>
        </template>
        <template #table-left>
        </template>
        <template #table-column>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="className" :label="$t('classification.name')" width="150"/>
            <el-table-column prop="featuresName" label="特征" width="150"/>
            <el-table-column prop="createTime" :label="$t('btn.createTime')"  />
        </template>
        <template #after-table-event="row">
        </template>
        <template #table-dialog>
            <el-form :rules="imageFeaturesModel.rules" :label-width="100" :label-position="'left'" :model="imageFeaturesModel" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('classification.name')" prop="name">
                    <el-select
                        v-model="imageFeaturesModel.languageClassificationId"
                        clearable :disabled="imageFeaturesModel?.id !== null"
                    >
                        <el-option
                            v-for="item in classification"
                            :key="item.id"
                            :label="item.className"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="特征名称" prop="featuresName">
                    <el-input v-model="imageFeaturesModel.featuresName" autocomplete="off"/>
                </el-form-item>
            </el-form>
        </template>
        <template #table-search>

        </template>
    </Page>

</template>

<style lang="scss" scoped>
.test-training{
    height: 300px;
    width: 100%;
}
.test-training-top{
    height: 240px;
    width: 100%;
    overflow-y: auto;
}
.test-training-bottom{
    width: 100%;
    height: auto;
}
</style>
